<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <style>
        .title-row {
            line-height: 26px;
        }
        .title-row img {
            width: 12px;
            padding: 0 4px;
        }
        .nodata {
            text-align: center;
            margin-top: 220px;
        }
        .right_cont_container {
            padding: 20px;
        }
        .content {
            padding-top: 30px;
        }
        .dept-item {
            display: inline-block;
            margin: 0 13px 20px 0;
            cursor: pointer;
            font-size: 18px;
            border: 2px solid #d5e9f3;
            width: 100px;
            height: 60px;
            text-align: center;
            color: #5b6d7b;
            position: relative;
            padding: 2px 20px;
        }
        .dept-item:hover {
            background-color: #68cacb;
            color: #fff;
        }
        .dept-item span {
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .search {
            display: block;
            width: 350px;
            padding: 8px 30px 8px 8px;
            margin: 0 0 30px 290px;
            border: 1px solid #d5e9f3;
        }
        .wei {
            position: relative;
        }
        .wei::after{
            content:'';
            width: 20px;
            height: 20px;
            display: inline-block;
            background: url(../img/search.png) no-repeat center center;
            background-size: 18px;
            position: absolute;
            top: 7px;
            left: 614px;
        }
        input::input-placeholder{
            color: #cdcdcd;
        }
        ::-webkit-input-placeholder {
            color: #cdcdcd;
        }
        ::-moz-input-placeholder {
            color: #cdcdcd;
        }
        ::-ms-input-placeholder {
            color: #cdcdcd;
        }
        .tablee {
            width: 100%;
            height:100%;
            display: table;
        }
        .cell {
            display: table-cell;
            vertical-align: middle;
            width: 100%;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div class="title-row">
                        <span>满意度调查</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>门诊调查</span>
                        <%--<div class="add">添加</div>--%>
                    </div>
                    <div class="nodata" v-if="nodata">
                        <img src="../img/nodata.png">
                        <div>暂时没有数据</div>
                    </div>
                    <div class="content" v-else>
                        <div class="dept">
                            <div class="wei">
                                <input type="text" class="search" v-model="searchKey" placeholder="请输入门诊名称">
                            </div>
                            <div v-for="dept in deptList | filterBy searchKey" class="dept-item" @click="outpatient(dept.id,dept.deptName)">
                                <div class="tablee">
                                    <div class="cell">{{dept.deptName}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../layui/layui.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            nodata: false,
            deptList: [],
            searchKey: "",
        },
        ready: function() {
            var _this = this;
            $.ajax({
                type: 'POST',
                url: "surDeptList.jsp",
                data: {
                    act: "get_dept",
                    hospital: "1111",
                    type: "5"
                },
                success: function (res) {
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        _this.deptList = res.list;
                    } else {
                        layer.open({
                            title: '提示',
                            content: res.errmsg
                        })
                    }
                }
            })
        },
        methods: {
            outpatient: function(id,name) {
                //console.log(id);
                name = encodeURI(name);
                window.location.href = "outpatient.jsp?id="+id+"&name="+name;
            }
        },
        components: {

        },
        events: {

        }
    })
    layui.use('layer', function(){
        var layer = layui.layer;
    })
</script>